<!--
 * @Description: 封装组件 el-select & el-tree 下拉树形选择
-->
<template>
    <div :class="treeClass">
        <el-select 
            ref="selectTree" 
            :value="value" 
            v-model="valueName" 
            :Paramsvalue="Paramsvalue" 
            :multiple="multiple"
            :clearable="clearable" 
            @clear="clearHandle" 
            @change="changeValue" 
            :popper-append-to-body="false"
            :placeholder="placeholder"
            class="tree-select-input"
        >
            <el-input 
                class="tree-select-container-input" 
                placeholder="请输入管线名称" 
                prefix-icon="el-icon-search" 
                v-model="treeFilter"
                size="mini" 
                clearable
            >
            </el-input>
            <el-option :value="valueName" class="options">
                    <!-- 树形列表的关键字过滤 -->
                    <el-tree 
                        class="tree" 
                        id="tree-option" 
                        ref="dataTree" 
                        :accordion="accordion" 
                        :data="options" 
                        :props="props"
                        :node-key="props.value" 
                        show-checkbox 
                        :filter-node-method="filterNode" 
                        @node-click="handleNodeClick"
                        @check-change="handleNodeClick"
                    >
                        <span slot-scope="{ data }">
                            <i 
                                :class="[data.color != null ? 'ification_col' : '']"
                                :style="{ 'background-color': data.color }"
                            >
                            </i>&nbsp;&nbsp;{{ data.name }}
                        </span>
                    </el-tree>
                </el-option>
        </el-select>
    </div>
</template>
<script>
export default {
    name: "tree-select",
    props: {
        // 配置项
        props: {
            type: Object,
            default: () => {
                return {
                    value: 'id',
                    children: 'children',
                    label: 'name'
                }
            }
        },
        // 选项列表数据(树形结构的对象数组)
        options: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 初始值（单选）
        value: {
            type: Object,
            default: () => {
                return {}
            }
        },
        // 初始值（多选）
        valueMultiple: {
            type: Array,
            default: () => {
                return []
            }
        },
        // 可清空选项
        clearable: {
            type: Boolean,
            default: true
        },
        // 自动收起
        accordion: {
            type: Boolean,
            default: false
        },
        // 是否多选
        multiple: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: () => {
                return ''
            }
        },
        flagValue: {
            type: Boolean,
            default: () => {
                return false
            }
        },
        //   valueName:{
        //     type: Array,
        //       default: () => {
        //           return []
        //       }
        //   },

        Paramsvalue: {
            type: String,
            default: () => {
                return ''
            }
        },
        treeClass: {
            type: String,
            default: () => {
                return ''
            }
        },
    },
    data() {
        return {
            resultValue: {}, // 传给父组件的数组对象值
            valueName: this.multiple ? [] : '',// 输入框显示值
            treeFilter: '',
            resultIndex: null
        }
    },
    watch: {
        value() {
            this.resultValue[this.Paramsvalue] = this.multiple ? this.valueMultiple : this.value;   // 初始值
            this.initHandle()
        },
        // 搜索过滤，监听input搜索框绑定的treeFilter
        treeFilter(val) {
            this.$refs.dataTree.filter(val);
            // 当搜索框键入值改变时，将该值作为入参执行树形控件的过滤事件filterNode
        },
        flagValue(val){
            if(val) this.clearHandle()
        }
    },
    mounted() {
        this.resultValue[this.Paramsvalue] = this.multiple ? this.valueMultiple : this.value;   // 初始值
        // 做判断  传值过来后 给对象添加对应属性名
        this.resultValue[this.Paramsvalue] = []

        this.initHandle();
    },
    methods: {

        // 初始化显示
        initHandle() {
            if (this.resultValue[this.Paramsvalue]) {
                if (this.multiple) {
                    // 多选 
                    this.resultValue[this.Paramsvalue].forEach(item => this.valueName.push(item.name));
                } else {
                    // 单选
                    this.valueName = this.resultValue[this.Paramsvalue].name;
                }
            }
            this.initScroll()
        },
        // 初始化滚动条
        initScroll() {
            this.$nextTick(() => {
                let scrollWrap = document.querySelectorAll('.el-scrollbar .el-select-dropdown__wrap')[0]
                let scrollBar = document.querySelectorAll('.el-scrollbar .el-scrollbar__bar')
                scrollWrap.style.cssText = 'margin: 0px; max-height: none; overflow: hidden;'
                scrollBar.forEach(ele => ele.style.width = 0)
            })
        },
        // 切换选项
        handleNodeClick(node) {
            // 点击叶子节点后被选中
            if (node.children == null || node.children == undefined) {
                if (this.multiple) {
                    // 多选（判重后添加）
                    let num = 0;
                    this.valueName.forEach(item => {
                        item == node[this.props.label] ? num++ : num;
                    })
                    if (num == 0) {
                        this.valueName.push(node[this.props.label]); // 输入框显示值
                        this.resultValue[this.Paramsvalue].push(node);
                    }
                } else {
                    // 单选
                    this.$refs.selectTree.blur();
                    this.valueName = node[this.props.label];
                    this.resultValue[this.Paramsvalue] = node;
                }

                this.$emit('getValue', this.resultValue);
            }
        },
        // 从输入框中直接删除某个值时
        changeValue(val) {
            if (this.multiple) {
                // 多选（同时删掉传给父组件中多余的值，再传给父组件）
                this.resultValue[this.Paramsvalue].map((item, index) => {
                    let i = val.indexOf(item.name)
                    if (i == -1) {
                        this.resultValue[this.Paramsvalue].splice(index, 1)
                    }
                })


                this.$emit('getValue', this.resultValue);
            } else {
                // 单选
                this.$emit('getValue', val);
            }
        },
        // 清除选中
        clearHandle() {
            this.valueName = this.multiple ? [] : ''
            this.resultValue[this.Paramsvalue] = []
            this.clearSelected()
            this.$emit('getValue', this.resultValue)
        },
        // 清空选中样式
        clearSelected() {
            let allNode = document.querySelectorAll('#tree-option .el-tree-node')
            allNode.forEach((element) => element.classList.remove('is-current'))
        },

        filterNode(value, data) {
            if (!value) return true;
            let filterRes = data.name.indexOf(value) !== -1;
            return filterRes;
        },
    }
}
</script>
<style lang="scss" scoped>
.tree-select-input {
    // background-color: red;
    width: 90%;
}
.tree-select-container-input {
    background-color: rgba(234, 123, 123, 0);
    margin-left: 5%;
    width: 90%;
}
::v-deep{

    .el-input__inner {
        background-color: rgba(4,57,109,0.5) !important;
        border: 0px;
        border-radius: 0px;
        color: #9ca6af !important;
    }

    .el-form-item__label {
        font-family: SourceHanSansCN-Regular !important;
        font-size: 14px !important;
        line-height: 44px !important;
        color: #daf0ff !important;
    }
    // 下拉选择框容器
    .el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
        height: auto;
        max-height: 500px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
        // background-color: rgba(234, 123, 123, 0.9);
        background-color: transparent;
    }

    .el-select-dropdown__item::-webkit-scrollbar {
        width: 4px;
        height: 1px;
        background: rgba(9, 85, 133, 0.4);
        display: block;
        border-radius: 3px;
    }

    // /*滚动条里面小方块*/
    .el-select-dropdown__item::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #095585;
    }

    // /*滚动条里面轨道*/
    .el-select-dropdown__item::-webkit-scrollbar-track {
        border-radius: 3px;
        background: transparent;
    }

    // 修改input框宽度
    // .el-color-picker__icon, .el-input, .el-textarea {
    //     display: inline-block;
    //     width: 90%;
    // }
    //下拉选择框
    .el-select-dropdown {
        left: 0px !important;
        min-width: auto !important;
        width: 90%;  
        background-color: rgba(44, 47, 55,1) !important;
        border-color: rgba(56, 102, 139, 0.9);
    }

    .el-select-dropdown__wrap {
        background-color: rgba($color: #02203d, $alpha: 0.8);
    }
//////////----tree---------/////////////////////////////////////////////
    // tree显示容器
    .el-tree {
        background-color: transparent !important;
        // background-color: rgba(44, 47, 55,0.9) !important;
        // box-shadow: inset 0px 0px 10px 4px rgba(17, 80, 126,0.9);   //内阴影效果
    }
    // tree默认文字颜色
    .el-tree .el-tree-node__content {
        color: #9ca6af !important;
    }

    



    // 修改选中样式
    .el-tree-node__content:hover { 
        background-color: rgba(4,57,109,0.5) !important;
        color: #deefff !important;
    }
    .el-tree-node:focus>.el-tree-node__content{
        background-color: rgba(4,57,109,0.5) !important;
        color: #fff !important;
    }

    //多选框默认边框
    .el-checkbox__inner {
        border: 1px solid #9ca6af !important;
        // border: 1px solid #0174a8 !important;
        background-color: transparent !important;
    }

    // 选择框选中样式
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: transparent !important;
        border-color: #9ca6af !important;
    }

    // 设置树形组件节点的定位和左内边距
    .el-tree-node {
        position: relative;
    }
    
    // 设置树形组件节点的 before 伪类的样式
    .el-tree-node:before {
        width: 1px;
        height: 100%;
        content: '';
        position: absolute;
        top: -38px;
        bottom: 0;
        left: 0;
        right: auto;
        border-width: 1px;
        border-left: 1px dashed #d9d9d9ab;
    }
    
    // 设置树形组件节点的 after 伪类的样式
    .el-tree-node:after {
        width: 13px;
        height: 13px;
        content: '';
        position: absolute;
        left: 0;
        right: auto;
        top: 12px;
        bottom: auto;
        border-width: 1px;
        border-top: 1px dashed #d9d9d9ab;
    }
    
    // 设置树形组件首节点的左边框不显示
    .el-tree > .el-tree-node:before {
        border-left: none;
    }
    
    // 设置树形组件首节点的顶部边框不显示
    .el-tree > .el-tree-node:after {
        border-top: none;
    }
    
    // 设置树形组件末节点的 before 伪类的高度
    .el-tree .el-tree-node:last-child:before {
        height: 50px;
    }
    
    // 设置树形组件节点字体大小、以及取消左内边距
    .el-tree .el-tree-node__content {
        color: #000;
        font-size: 14px;
        padding-left: 0 !important;
    }
    
    // 设置树形组件孩子节点左内边距
    .el-tree .el-tree-node__children {
        padding-left: 11.5px;
        .el-tree-node{
        padding-left: 13px;
        }
    }
    
    // 设置树形组件复选框左右外边距
    .el-tree .el-tree-node__content > label.el-checkbox {
        margin: 0 5px 0 5px !important;
    }
    
    // 设置树形组件展开图标定位、图层、内边距
    .el-tree .el-tree-node__expand-icon {
        position: relative;
        z-index: 99;
    }
    
    // 设置树形组件叶子节点的默认图标不显示
    .el-tree .el-tree-node__expand-icon.is-leaf {
        display: none;
    }
    
    // 设置树形组件叶子节点的横线
    .el-tree .leaf-node-line {
        width: 23px;
        height: 13px;
        content: '';
        position: absolute;
        left: 13px;
        right: auto;
        top: 12px;
        bottom: auto;
        border-width: 1px;
        border-top: 1px dashed #d9d9d9ab;
    }
    
    // 设置树形组件有叶子节点的左外边距
    .el-tree .el-tree-node__content:has(.is-leaf){
        padding-left: 8px !important;
    }


    //弹框三角样式
    .el-popper[x-placement^=bottom] .popper__arrow {
        border-bottom-color: rgba(56, 102, 139, 0.9) !important;
    }

    .el-popper[x-placement^=bottom] .popper__arrow::after {
        border-bottom-color: rgba(56, 102, 139, 0.9) !important;
    }

    .el-checkbox__inner::after {
        box-sizing: content-box;
        content: "";
        border: 0px !important;  //
        /* border-left: 0; */
        /* border-top: 0; */
        height: 7px;
        width: 8px;
        left: 3px;
        background-color: #00baff;
        position: absolute;
        top: 3px;
        transform: rotate(45deg) scaleY(0);
        width: 7px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner::after {
        transform: rotate(90deg) scaleY(1);
    }

}


</style>